<!--
 * @Author: byron
 * @Date: 2021-09-29 16:45:00
 * @LastEditTime: 2021-10-04 12:05:46
-->

<template>
    <div class="with-pagination">
        <slot></slot>
        <div class="pagination-warp">
            <Pagination
                :total="total"
                :limit="limit"
                :current-page.sync="currentPage"
                :page-size="limit"
                @current-change="onPageChange"
            />
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        limit: {
            type: Number,
            default: 40,
        },
        total: {
            type: Number,
            default: 0,
        },
        getData: {
            type: Function,
            required: true,
        },
        getDataParams: {
            type: Object,
        },
        scrollTarget: {
            type: HTMLElement,
        },
    },
    data() {
        return {
            currentPage: 1,
        }
    },
    watch: {
        deep: true,
        getDataParams() {
            this.currentPage = 1
            this.onPageChange()
        },
    },
    computed: {},
    methods: {
        async onPageChange() {
            try {
                const result = await this.getData({
                    limit: this.limit,
                    offset: (this.currentPage - 1) * this.limit,
                    ...this.getDataParams,
                })
                this.$emit('getDataSuccess', result)

                if (this.scrollTarget) {
                    this.$utils.scrollInto(this.scrollTarget)
                }
            } catch (error) {
                this.$emit('getDataError', error)
            }
        },
    },
    created() {
        this.onPageChange()
    },
    mounted() {},
}
</script>
<style lang="scss" scoped></style>
